<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<!-- 
    CSS盒子模型

      1.组成
      从内到外 content -> padding -> border -> margin

      1.1. content：内容区域
          是由width和height组成的区域，增加内边距、边框和外边距不会影响内容区域元素框的总尺寸

      1.2. padding：内边距（内填充）
            只写一个值：30px（上下左右）
            写两个值：30px 40px（上下、左右）
            写三个值：30px 40px 50px（上 左&右 下）
            写四个值：30px 40px 50px 60px（上、右、下、左）
        也可单独针对某一边进行设置，此时只能写一个值：
          padding-left padding-right padding-top padding-bottom
      
      1.3. border
          边框 ，内容见6.边框样式

      1.4.margin：外边距（外填充）
        用法与padding一样
    
    注意：
    2 背景颜色会填充到margin以内的区域
    3.文字在content区域添加
          padding不能出现负值，margin可以出现负值（利用margin负值可以做一些复杂的布局效果）

 -->

 <style>
   /* 1.盒子模型组成 */
    /* #div1{
      width: 200px;
      height: 200px;
      background-color: red;

      padding: 20px;

      border: gray 10px solid;

      margin:30px;
    }
    #div2{
      width: 200px;
      height: 200px;
      background-color: black;
    } */

    /* 2. 背景颜色会填充到margin以内的区域
    3.文字在content区域添加 */
    /* #div1{
      width: 200px;
      height: 200px;
      border-width: 10px;
      border-style: solid;
      border-color: transparent;
      background-color: red;
      padding: 20px;
    } */

    /* 4. 负数值问题  */
    #div1{
      width: 200px;
      height: 200px;
      background-color: red;
      /*  负值就相当于0了 */
      padding: -20px; 

      border: gray 10px solid;

      margin:-30px;
    }
    #div2{
      width: 200px;
      height: 200px;
      background-color: black;
    }

 </style>

</head>
<body>
  <!-- 1.盒子模型组成 -->
  <!-- <div id="div1">内容区域</div>
  <div id="div2">内容区域2</div> -->

  <!-- 2 背景颜色会填充到margin以内的区域
      3.文字在content区域添加
  -->
  <!-- <div id="div1">内容区域</div> -->

  <!-- 4. 负数值问题 -->
  <div id="div1">内容区域</div>
  <div id="div2">内容区域2</div>

  
</body>
</html>